<template>
  <GcTable
  v-loading="loading"
    v-model:searchKeywords="searchKeywords"
    :pagination="pagination"
    :columns="CIRCLE_COMMENT_COLUMNS"
    :tableData="tableData"
    :showFilter="false"
    searchPlaceholder="请输入昵称/评论内容进行搜索"
    @current-change="handlerCurrentChange"
    @search="handlerSearch">
    <template #picList="{ row }">
      <div class="pic-list">
        <el-image
          :z-index="999999"
          preview-teleported
          v-for="(img, idx) in row.picList"
          :key="img"
          style="width: 30px; height: 30px"
          :src="img"
          :zoom-rate="1.2"
          :preview-src-list="row.picList"
          :initial-index="idx"
          fit="cover"
        />
      </div>
    </template>
    <template #operate="{ row }">
      <div class="operate-btn-group center">
        <gc-icon-button type="link" @click="deleteComment(row.id)">删除</gc-icon-button>
      </div>
    </template>
  </GcTable>
</template>

<script setup lang="ts" name="ShareCircleComment">
import { ref } from 'vue'
import { CIRCLE_COMMENT_COLUMNS } from './const'
import usePagination from '@/hooks/usePagination'
import type { Pagination } from '@/@type'
import { apiGetCircleCommentList, apiDeleteCircleComment } from '@/http/service'
import type { Comment } from '@/http/type'
import { ElMessage, ElMessageBox } from 'element-plus'

interface ResponseArticleComment extends Pagination {
  dataList: Array<Comment>
}
const { pagination, loading } = usePagination()

const tableData = ref<Array<Comment>>([])
const searchKeywords = ref('')

/**
 * 友圈评论列表查询
 */
async function findCircleCommentList () {
  const searchParams = {
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    searchKeywords: searchKeywords.value
  }
  loading.value = true
  try {
    const { dataList, ...pageInfo } = await apiGetCircleCommentList<ResponseArticleComment>(searchParams)
    tableData.value = dataList
    Object.assign(pagination, pageInfo)
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findCircleCommentList()

/**
 * 友圈评论删除
 * @param id
 */
async function deleteComment (id: string) {
  await ElMessageBox.confirm(
    '删除该条评论会同时删除该评论下的所有评论，确认删除？',
    '提示',
    { type: 'warning' }
  )
  await apiDeleteCircleComment({ id })
  ElMessage.success('删除评论成功')
  findCircleCommentList()
}

function handlerSearch () {
  pagination.pageNo = 1
  findCircleCommentList()
}

function handlerCurrentChange (val: number) {
  pagination.pageNo = val
  findCircleCommentList()
}
</script>

<style lang="scss" scoped>
.pic-list {
  display: flex;
  justify-content: center;
}
</style>
